<script>
  export default {
    name: 'istrongCheckBox',
    props: {
      disabled: {
        type: Boolean,
        default: false
      },
      value: {//是否选中了
        type: Boolean,
        default: false
      },
      dataValue: {//数据value
        type: String,
        required: true
      },
      dataLabel: {
        type: String
      }
    },
    data() {
      return {
        selected: this.value
      }
    },
    mounted() {
    },
    methods: {
      onChecked() {
        this.selected = !this.selected;
      }
    },
    watch: {
      value(val) {
        this.selected = val;
      },
      selected(val) {
        this.$emit('input', val);
      }
    }
  }
</script>

<template>
  <div class="istrong-checkbox" v-on:click="onChecked">
    <span class="istrong-checkbox-value">
      <input
        class="istrong-checkbox-input"
        type="checkbox"
        v-model="selected"
        :disabled="disabled"
        :value="dataValue">
      <span class="istrong-checkbox-core"></span>
    </span>
    <span class="istrong-checkbox-label" v-text="dataLabel || dataValue"></span>
  </div>
</template>
<style>
.istrong-checkbox{
  display: block;
  padding: 0 10px;
  font-size: 16px;
}
.istrong-checkbox-input {
  display: none;
}
.istrong-checkbox-input:checked+.istrong-checkbox-core {
  background-color: #26a2ff;
  border-color: #26a2ff;
}
.istrong-checkbox-core {
  display: inline-block;
  background-color: #fff;
  border-radius: 100%;
  border: 1px solid #ccc;
  position: relative;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
.istrong-checkbox-label {
  vertical-align: middle;
  margin-left: 6px;
}
.istrong-checkbox-input:checked+.istrong-checkbox-core:after {
  border-color: #fff;
  -webkit-transform: rotate(45deg) scale(1);
  transform: rotate(45deg) scale(1);
}
.istrong-checkbox-core:after {
  border: 2px solid transparent;
  border-left: 0;
  border-top: 0;
  content: " ";
  top: 1px;
  left: 5px;
  position: absolute;
  width: 4px;
  height: 8px;
  -webkit-transform: rotate(45deg) scale(0);
  transform: rotate(45deg) scale(0);
  -webkit-transition: -webkit-transform .2s;
  transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s,-webkit-transform .2s;
}
</style>